<template>
  <div class="GmaeCategory">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="$router.go(-1)" ref="header">
          <span class="iconfont icon-xiangzuo1"></span>
        </div>
      </template>
      <template #middle>
        <div class="middle">
          <span class="title">{{
            tagList_temp.length ? tagList_temp.join(" · ") : "全部分类"
          }}</span>
        </div>
      </template>
      <template #right>
        <div class="right" @click="$router.push('/MsgView')">
          <span class="iconfont icon-xiaoxi"></span>
        </div>
      </template>
    </top-title-bar>

    <div v-if="GameList">
      <nav>
        <!-- - 左边 -->
        <div class="left">
          <p
            v-for="(item, index) in orderList"
            :key="item.orderType"
            :class="{ con: navIndex == index }"
            @click="navIndex = index"
          >
            {{ item.name }}
          </p>
        </div>

        <!-- - 右边 -->
        <div class="right" @click="filtersShow = true">
          <span>筛选</span>
          <em
            :class="['iconfont', 'icon-filter', { con: tagList_temp.length }]"
          ></em>
        </div>
      </nav>

      <div class="wrap">
        <div class="game-item-box">
          <div class="body">
            <div
              class="item"
              v-for="item in app_list_temp"
              :key="item.appid"
              @click="$router.push('/GameDetail?app_id=' + item.appid)"
            >
              <!-- - 图片 -->
              <div class="icon"><img :src="item.applogo" alt="" /></div>

              <div class="text">
                <!-- - 左边 -->
                <div class="left">
                  <h4 class="text-ellipsis-1">{{ item.apptitle }}</h4>
                  <p class="text-ellipsis-1">
                    {{
                      item.categoryname
                        ? item.categoryname.replaceAll(",", " · ")
                        : "游戏"
                    }}
                  </p>
                </div>

                <!-- - 右边 -->
                <div class="right">
                  <a
                    v-if="item.appid % 2 == 0"
                    :href="item.dataDownUrl"
                    target="_blank"
                    class="download"
                    @click.stop=""
                    >下载</a
                  >
                  <a
                    v-if="item.appid % 2 == 1"
                    href=""
                    target="_blank"
                    class="play"
                    @click.stop.prevent="$toast('未安装微信\n无法打开小程序')"
                    >直接玩</a
                  >
                </div>
              </div>
            </div>
            <van-empty
              v-show="!app_list_temp.length"
              class="custom-image"
              image="./img/empty.png"
              description="去其他地方看看吧!"
            />
          </div>
        </div>
      </div>

      <van-popup v-model="filtersShow" position="bottom">
        <div class="filters-box">
          <div class="btns">
            <div class="reset" @click="resetFun">重置</div>
            <div class="sub" @click="subFun">确定</div>
          </div>
          <div class="category-box">
            <div class="category">
              <div
                class="category-item"
                v-for="item in cateList"
                :key="item.id"
              >
                <div class="title">{{ item.name }}</div>
                <div class="content">
                  <span
                    :class="{
                      con: tagList.some((tag) => tag == obj.type_name),
                    }"
                    v-for="obj in item.appTypes"
                    :key="obj.type_id"
                    @click="tagClickFun(obj.type_name)"
                    >{{ obj.type_name }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import TopTitleBar from "../components/TopTitleBar.vue";
import { getGameList } from "../assets/api/game.js";
export default {
  data() {
    return {
      navIndex: 0, //最近更新 最新游戏 最多下载
      filtersShow: false, // 过滤器显示
      GameList: null, //数据中心
      orderList: null, //最近更新 最新游戏 最多下载
      app_list: null, //应用数据
      // app_list_temp: null, //应用数据 移至计算属性
      cateList: null, //分类
      tagList: [],
      tagList_temp: [],
    };
  },
  methods: {
    // 初始化数据
    dataInit() {
      this.GameListInit();
    },

    // 游戏列表初始化
    async GameListInit() {
      let data = await getGameList();
      this.GameList = data;

      this.orderList = data.conditions.orderList;
      this.app_list = data.gamelist.app_list;
      this.cateList = data.conditions.cateList;

      console.log("cateList=>", this.cateList);
      console.log("app_list=>", this.app_list);
      console.log("orderList=>", this.orderList);
    },

    // 标签点击事件
    tagClickFun(tag) {
      let index = this.tagList.findIndex((_tag) => tag == _tag);
      if (this.tagList.length < 3) {
        if (index == -1) this.tagList.push(tag);
        else this.tagList.splice(index, 1);
      } else if (this.tagList.length == 3) {
        if (index != -1) this.tagList.splice(index, 1);
        else this.$toast("最多选三个标签");
      }
    },

    // 重置按钮
    resetFun() {
      this.tagList = [];
      this.$toast({
        message: "清空",
        position: "top",
      });
      console.log("清空");
    },

    // 确定按钮
    subFun() {
      // 隐藏过滤器
      this.filtersShow = false;
      // 防止浅拷贝
      this.tagList_temp = JSON.parse(JSON.stringify(this.tagList));
    },
  },
  computed: {
    app_list_temp() {
      console.log(this.app_list);
      // 0最近更新 1最新游戏 2最多下载
      let res = this.app_list;
      if (this.tagList_temp.length > 0) {
        res = res.filter((item) => {
          console.log(item.categoryname);
          return this.tagList_temp.every(
            (obj) => item.categoryname.indexOf(obj) > -1
          );
        });
      }
      if (this.navIndex == 0)
        return res.sort((a, b) => b.updateTime - a.updateTime);
      else if (this.navIndex == 1)
        return res.sort((a, b) => b.createTime - a.createTime);
      else if (this.navIndex == 2)
        return res.sort((a, b) => b.downCount - a.downCount);
      return res;
    },
  },
  created() {
    this.dataInit();
  },

  components: {
    TopTitleBar,
  },
};
</script>

<style lang="scss" scoped>
.GmaeCategory {
  min-height: 100%;
  background-color: #fff;
  ::v-deep .TopTitleBar {
    header {
      background: #fff;
    }
    .left {
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #000;
        font-size: 22px;
      }
    }

    .middle {
      display: flex;
      justify-content: center;
      .title {
        color: #000;
        font-weight: bold;
      }
    }

    .right {
      .icon-xiaoxi {
        font-weight: bold;
        color: #000;
        font-size: 22px;
      }
    }
  }

  nav {
    display: flex;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    border-bottom: 1px solid #e2e2e2;
    padding: 0;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    min-width: 320px;
    max-width: 750px;
    margin: auto;
    width: 100%;
    p {
      flex: 1;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #646464;
      span {
        display: block;
        width: max-content;
        margin: 0 auto;
        position: relative;
        font-size: 15px;
      }
    }
    .con {
      span {
        color: #0cc85c;
        &::after {
          content: "";
          position: absolute;
          display: block;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3px;
          background-color: #0cc85c;
          border-radius: 3px;
        }
      }
    }
  }

  nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    min-width: 320px;
    max-width: 750px;
    margin: auto;
    padding: 9px 12px 12px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    height: max-content;
    border-bottom-width: 0;
    .left {
      width: 180px;
      display: flex;
      background-color: #f0f0f0;
      padding: 2px;
      height: 21px;
      border-radius: 5px;
      p {
        height: 21px;
        line-height: 21px;
        color: #969696;
        font-size: 13px;
        border-radius: 5px;
      }
      .con {
        color: #72cb7a;
        background-color: #fff;
      }
    }
    .right {
      height: 25px;
      line-height: 25px;
      font-size: 13px;
      span {
        color: #323232;
      }
      em {
        display: inline-block;
        // background: url("../imgs/filter.png") no-repeat 0 0;
        background-size: 16px 9px;
        width: 16px;
        height: 9px;
      }
    }
  }

  .game-item-box {
    .head {
      height: 23px;
      line-height: 23px;
      padding-left: 8px;
      background-color: #f0f0f0;
      font-size: 12px;
      position: sticky;
      top: 106px;
      left: 0;
      right: 0;
      color: #8a8a8a;
    }
    .item {
      display: flex;
      height: 75px;
      box-sizing: border-box;
      border-bottom: 1px solid #e5e5e5;
      padding: 0 12px;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      .icon {
        width: 51px;
        height: 51px;
        border-radius: 7px;
        overflow: hidden;
        margin-right: 10px;
      }
      .text {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .left {
          flex: 1;
        }
        h4 {
          color: #0e0e0e;
          height: 23px;
          line-height: 23px;
        }
        p {
          color: #969696;
          font-size: 12px;
          height: 23px;
          line-height: 23px;
        }
        a {
          display: block;
          width: 61px;
          height: 28px;
          border-radius: 14px;
          background-color: #fff;
          box-sizing: border-box;
          border: 1px solid #22c251;
          color: #22c251;
          font-size: 13px;
          text-align: center;
          line-height: 28px;
        }
      }
      .right {
        display: flex;
        align-items: center;
      }
    }
  }

  nav {
    top: 50px;
    .left {
      p {
        font-size: 12px;
      }
    }
    .right {
      transition: all 0.3s ease;
      &:active {
        transform: scale(1.08);
      }
      em.con {
        color: #0cc85c;
      }
      span {
        margin-right: 5px;
      }
    }
  }

  .game-item-box {
    .head {
      top: 96px;
    }
    .body {
      .item {
        &:active {
          box-shadow: 0 0 50px 0 inset rgba($color: #000000, $alpha: 0.2);
        }
        .text {
          .left {
            h4 {
              font-size: 15px;
            }
          }
          .right {
            a {
              display: block;
              border-radius: 12px;
              width: 61px;
              height: 24px;
              line-height: 26px;
              text-align: center;
              font-size: 13px;
              &.download {
                border: 1px solid #20c250;
                color: #20c250;
              }
              &.play {
                border: 1px solid #3f51b5;
                color: #3f51b5;
              }
            }
          }
        }
      }
    }
  }

  .wrap {
    padding-top: 46px;
  }

  .filters-box {
    // padding: 10px;
    .btns {
      height: 40px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f7f7f7;
      .reset {
        color: #424242;
        &:active {
          color: #000;
          transform: scale(1.08);
        }
      }
      .sub {
        color: #fcfefd;
        background-color: #0cc85c;
        width: 80px;
        height: 30px;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        &:active {
          opacity: 0.9;
        }
      }
    }
    .category-box {
      height: 300px;
      overflow-y: scroll;
      overflow-x: hidden;
      .category-item {
        padding: 0 10px;
        .title {
          color: #616161;
          font-weight: bold;
          height: 40px;
          line-height: 40px;
        }
        .content {
          display: flex;
          flex-wrap: wrap;
          span {
            padding: 0 14px;
            color: #696969;
            font-size: 12px;
            height: 26px;
            line-height: 26px;
            border-radius: 5px;
            background-color: #f0f0f0;
            margin-right: 12px;
            margin-bottom: 12px;
            &.con {
              background-color: #19d469;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>